// 封装自定义指令--自动获取焦点
// 封装成一个插件 -使用Vue.use()注册
// Vue.use中需要一个install方法
// 自定义指令中有一个inserted方法 用于接收指令绑定的dom和bind
// 4.注意Dialog里面的输入框自动聚焦解决问题,Dialog只有第一次出现插入到
// -真实DOM,触发inserted方法；Dialog再次出现是通过v-show控制没有在dom上
// 解决方法：给自定义指令添加update方法，指定所在DOM更新执行
export default {
  install (Vue) {
    Vue.directive('focus', {
      // 当被绑定的元素插入到DOM中
      // 1.判断当前的node类型 如果是input或者是textarea可以直接绑定focus()
      // 2.如果不是这两种类似 可能是使用第三方组件
      // 在组件内获取当前的input或者textarea
      // 给获取到的el元素绑定focus
      // 3.如果获取不到 直接报错
      inserted (el) {
        fn(el)
      },
      update (el) {
        fn(el)
      }
    })
  }
}

const fn = (el) => {
  if (el.nodeName === 'INPUT' || el.nodeName === 'TEXTAREA') {
    el.focus()
  } else {
    const inp = el.querySelector('input')
    const textarea = el.querySelector('textarea')
    if (inp || textarea) {
      inp && inp.focus()
      textarea && textarea.focus()
    } else {
      console.error('请把v-focus用在输入框标签上')
    }
  }
}
